<template>
  <div class="home-header">
    <div class="home-logo" @click="goHome">
      <svg xml viewBox="0 0 2918 1024">

          <path d="M0 0h1024v1024H0z" fill="#ffffff" p-id="4044"
                data-spm-anchor-id="a313x.search_index.0.i13.78c73a81vvcRzc" class="selected"></path>
          <path
            d="M88.493827 262.953086S166.151675 396.235626 366.256085 418.991182c177.348854 25.283951 163.62328 286.79224 167.596472 395.152028-39.009524-18.421164 4.334392-135.810935-212.023986-182.405644C105.470194 585.142857 88.493827 262.953086 88.493827 262.953086z"
            fill="#2480f5" p-id="4045" data-spm-anchor-id="a313x.search_index.0.i10.78c73a81vvcRzc"
            class="selected"></path>
          <path
            d="M458.723104 436.689947c64.654674 43.705115 90.299824 216.719577 90.299824 290.404233 39.731922-149.175309 117.389771-314.243386 401.653615-368.062081-145.202116-35.036332-230.806349-35.036332-318.216578 31.785538-53.818695 53.818695-45.87231 63.571076-79.463845 83.437037-17.698765 8.307584-37.564727 0-22.033157-59.597884 19.504762-74.045855 49.845503-11.919577 49.845503-11.919577s-3.973192-89.216226-57.430688-77.657848C458.723104 339.166138 458.723104 436.689947 458.723104 436.689947M461.612698 209.85679s-22.394356 80.908642 61.40388 105.831393c0-27.812346-12.641975-32.869136-27.089947-47.317107-14.809171-14.447972-34.313933-58.514286-34.313933-58.514286z"
            fill="#2480f5" p-id="4046" data-spm-anchor-id="a313x.search_index.0.i11.78c73a81vvcRzc"
            class="selected"></path>

        <text x="1400" y="800" font-family="Gill Sans" font-size="700" fill="#626262">精</text>
        <text x="2150" y="800" font-family="Arial" font-size="700" fill="#626262">卫</text>
      </svg>

    </div>

    <div v-if="show" class="home-menu">
      <div class="menu-wrapper">
        <el-menu
          :default-active="headerMenu"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item v-for="menu in computedMenuList" :index="menu.key" :key="menu.key">{{
              menu.name
            }}
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="project-select">
      <el-dropdown placement="bottom-start" size="medium" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          {{ currentProject.project_name || "请选择项目"
          }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <div class="query-wrapper">
            <el-input
              v-model="query"
              size="small"
              suffix-icon="el-icon-search"
              @input="filterProjects"
            ></el-input>
          </div>

          <el-dropdown-item v-for="item in filteredProjects" :key="item.id" :command="item.id">{{
              item.project_name
            }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="login_out">
      <span style="color:#595959">{{ username }}</span>
      <el-button type="text" style="margin-left:4px" @click="exit">退出登录</el-button>

    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "HomeHeader",
  data() {
    return {
      roleType: "",
      menulist: [
        {
          key: "data",
          name: "数据开发"
        },
        {
          key: "manage",
          name: "项目中心"
        },
        {
          key: "setting",
          name: "系统管理"
        }
      ],

      query: "",
      show: true,
      username: ""
    };
  },
  computed: {
    ...mapState({
      projects: ({ project }) => project.projects,
      currentProject: ({ project }) => {
        return project.currentProject || {};
      },
      headerMenu: ({ global }) => {
        return global.headerMenu;
      }
    }),
    filteredProjects() {
      let { projects, query } = this;
      if (!query) return projects;
      return this.projects.filter(({ project_name }) => {
        return project_name.includes(query);
      });
    },
    computedMenuList() {
      let { menulist, roleType } = this;
      return menulist.filter(menu => {
        return (menu.key == "setting" && roleType) || menu.key != "setting";
      });
    }
  },
  created() {
    this.$http.role.getUserRole().then(res => {
      this.roleType = res;
    });
    this.username = this.$cookies.get("username") || "";
  },
  methods: {
    ...mapMutations(["setCurrentProject", "setCurrentMenu"]),
    handleCommand(command) {
      let currentProject = this.projects.find(({ id }) => id == command);
      this.setCurrentProject(currentProject);
      this.$router.push({
        name: "data",
        query: {
          project_id: currentProject.id,
          project_name: currentProject.project_name
        }
      });
      this.setCurrentMenu("data");
    },
    handleSelect(menu) {
      if ((!this.currentProject || !this.currentProject.id) && menu != "setting") {
        this.$message({
          type: "warning",
          message: "请先选择项目"
        });
        this.show = false;
        this.$nextTick(() => {
          this.show = true;
          this.setCurrentMenu("");
        });
        return;
      }

      this.setCurrentMenu(menu);
      this.$router.push({
        name: menu,
        query: {
          project_id: this.currentProject.id,
          project_name: this.currentProject.project_name
        }
      });
    },
    goHome() {
      this.setCurrentProject({});
      this.setCurrentMenu("");
      if (this.$route.name !== "main") {
        this.$router.push({
          path: "/home"
        });
      }
    },
    exit() {
      this.$cookies.set("username", "");
      this.$cookies.set("token", "");
      this.$router.push("/login");
    }
  }
};
</script>
<style lang="scss">
.home-header {
  position: relative;
  display: flex;
  align-items: center;

  .project-select {
    margin: 0 24px;
    cursor: pointer;
  }

  .home-logo {
    cursor: pointer;

    svg {
      height: 38px;
      width: 150px;
      cursor: pointer;
      margin-top: 4px;
    }
  }

  .logo {
    width: 60px;
    height: 60px;
    margin-left: 20px;
  }

  .home-menu {
    flex: 1;

    .el-menu--horizontal {
      border-bottom-color: transparent;
    }
  }
}

.query-wrapper {
  padding: 4px 12px;
  max-width: 180px;
}
</style>
